@charset "utf-8";
@font-face {
	font-family: 'fggo';
	src: url('../font/fggo.eot');
	src: url('../font/fggo.eot?#iefix') format('embedded-opentype'),
	     url('../font/fggo.woff') format('woff'),
	     url('../font/fggo.ttf')  format('truetype'),
	     url('../font/fggo.svg#svgFontName') format('svg');
}
.icon{width:100px;height:100px;font-family:"fggo";color:#CCC;}
.head-icon{font-size:50px;}
a.icon:hover{color:#FFF;text-decoration:none;}
.header{position:fixed;width:100%;height:60px;top:0;left:0;line-height:60px;background-color:#333;z-index:100;}
.content{position:relative;width:1000px;margin:0 auto;padding:60px 0 120px 0;}
.sidebar{position:fixed;right:50px;top:152px;_position:absolute;}
.sidebar li{position:relative;padding-bottom:47px;border-left:1px solid #333;}
.sidebar li.last{border-left-color:#FFF;}
.sidebar a{display:block;position:absolute;top:-17px;left:-9px;width:17px;height:17px;background: url(images/sprite.png) no-repeat -223px -70px;}
.sidebar a:hover,.sidebar a.on,.sidebar a.cur{background-position:-245px -70px;}
.sidebar .label{display:none;position:absolute;top:-20px;left:-77px;width:66px;height:21px;background: url(images/sprite.png) no-repeat -151px -70px;line-height:21px;text-align:center;text-indent:-5px;color:#FFF;}
.icon-me{display:block;width:86px;height:126px;background: url(images/lantylan.png) no-repeat 0 0;}

.index,.about,.work{height:700px;}
/*index*/
.index{padding-top:70px;}
.me-img{padding-right:14px;}
.me-img img{width:230px;height:217px;}
.me-info{width:540px;}
.nick li{float:left;}
.nick-name{width:146px;height:65px;background: url(images/sprite.png) no-repeat 0 0;}
.nick-img{width:67px;height:63px;margin-left:20px;line-height:63px;text-indent:13px;color:#FFF;font-family:Arial;background: url(images/sprite.png) no-repeat -151px 0;}
.basic-info{padding-top:67px;}
.basic-info li{margin-bottom:10px;background-color:#333;}
.basic-info .li-name{width:155px;height:29px;padding-top:3px;}
.basic-info .li-age{width:155px;height:26px;padding-top:6px;}
.basic-info .li-job{width:235px;height:30px;padding-top:2px;}
.basic-info span{display:block;margin-left:15px;}
.basic-info .name{width:126px;height:28px;background:url(images/sprite.png) no-repeat 0 -70px;}
.basic-info .age{width:120px;height:19px;background:url(images/sprite.png) no-repeat 0 -103px;}
.basic-info .job{width:137px;height:27px;background:url(images/sprite.png) no-repeat 0 -127px;}
.basic-info .heart{width:20px;height:17px;margin-top:6px;background: url(images/sprite.png) no-repeat -280px 0;}
.me-desc{padding-top:52px;}
.me-desc li{padding-bottom:18px;}

/*work*/
.icon-work{display:inline-block;float:left;width:17px;height:17px;margin:4px 0 0 14px;background: url(images/sprite.png) no-repeat 0 0;}
.icon-planar{background-position:-223px 0;}
.icon-web{background-position:-223px -22px;}
.icon-hand{background-position:-223px -43px;}
.work-menu{padding-bottom:20px;}
.work-menu li{position:relative;width:42px;height:26px;margin-bottom:1px;background-color:#999;color:#FFF;cursor:pointer;}
.work-menu li.on{width:82px;background-color:#333;}
.work-menu li .menu-txt{float:left;height:17px;padding:3px 0 0 6px;}
.work-menu li.on .icon-work{margin-left:8px;}
.work-menu li.on .menu-txt{display:inline-block;}
.work-count-txt{display:block;position:absolute;width:80px;height:26px;top:0;right:-88px;line-height:26px;}

.work-planar .box{width:750px;margin:0 auto;}
.work-item{float:left;position:relative;margin:0 5px 5px 0;padding:1px;border:3px solid #333;cursor:pointer;}
.work-item-planar{width:362px;height:212px;line-height:212px;overflow:hidden;}
.work-item img{position:absolute;top:1px;left:1px;z-index:1;}
.work-item-planar img{width:362px;height:212px;}
.work-item .mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;z-index:2;}
.work-item p{display:inline-block;position:absolute;vertical-align:middle;color:#FFF;text-align:center;z-index:3;}
.work-item p span{display:inline-block;width:290px;margin-top:-40px;vertical-align:middle;line-height:18px;text-align:left;font-size:12px;}
.work-item-planar p{width:362px;height:212px;font-size:212px;}

.work-web .box{width:796px;margin:0 auto;}
.work-item-web{width:252px;height:442px;line-height:442px;overflow:hidden;}
.work-item-web img{width:252px;height:442px;}
.work-item-web p{width:252px;height:442px;font-size:442px;}
.work-item-web p span{width:240px;margin-top:-100px;}

.work-item-more{border-color:#E3E3E3;background:#E3E3E3 url(images/work-more.png) no-repeat 50% 50%;cursor:default;}

.arrow{display:block;position:absolute;width:30px;height:57px;background:#FFF url(images/sprite.png) no-repeat -187px -96px;overflow:hidden;}
.work-planar .arrow-pre{top:197px;left:-70px;}
.work-web .arrow-pre{top:172px;left:-70px;}
.about-job .arrow-pre{top:100px;left:-100px;}
.arrow-pre-gray{background-position:-187px -159px;}
.arrow-next{background-position:-152px -96px;}
.work-planar .arrow-next{top:197px;right:-70px;}
.work-web .arrow-next{top:172px;right:-70px;}
.about-job .arrow-next{top:100px;right:-100px;}
.arrow-next-gray{background-position:-152px -159px;}

/*about*/
.icon-about{margin:4px 0 0 8px;}
.about-menu{padding-bottom:170px;}
.about-menu li{position:relative;width:42px;height:26px;margin-bottom:1px;background-color:#999;color:#FFF;cursor:pointer;}
.about-menu li.on{width:92px;background-color:#333;}
.about-menu li.on .icon-work{margin-left:3px;}
.about-menu li .menu-txt{padding:3px 0 0 3px;}
.icon-school{width:28px;background-position:-245px -22px;}
.icon-job{width:28px;background-position:-245px -44px;}
.about-title{padding-bottom:30px;}
.about-title h3{width:125px;height:32px;background-color:#333;text-indent:100%;word-spacing:nowrap;overflow:hidden;}
.about-title h3.school{width:155px;}
.about-title h3 span{display:block;margin:4px 0 0 18px;background:url(images/sprite.png) no-repeat 0 -159px;}
.about-title h3.school span{background-position:0 -192px;}
.about-title .icon-me{margin:-94px 0 0 20px;}
.about-job .box{width:600px;margin:0 auto;}
.about-list dl{padding-left:18px;background: url(images/sprite.png) no-repeat -290px -26px;}
.about-list dd{padding-bottom:20px;}

.line{padding:50px 0;}
.line span{display:block;width:51px;height:51px;background: url(images/sprite.png) no-repeat -229px -96px;line-height:51px;text-align:center;}
.line p{height:24px;border-bottom:1px dashed #474747;overflow:hidden;}

.footer{position:fixed;width:100%;height:60px;bottom:0;left:0;background-color:#333;z-index:100;}